<template>
  <div class="admin">
    <!-- 表单信息，功能按钮 -->
    <UserPageSearch
      :formConfig="adminFormConfig"
      @handleNewClick="onHandleNewClick"
      @handleDownloadClick="onHandleDownloadClick"
    />
    <!-- 用户信息表格 -->
    <UserPageContent
      ref="userPageContentRef"
      v-bind="adminTableProps"
      @pageInfoChange="onPageInfoChange"
      @handleEditClick="onHandleEditClick"
    ></UserPageContent>
    <!-- 对话框框 -->
    <UserFormModal
      ref="formModelRef"
      :defualtFormData="defualtModelFormData"
      :modelConfig="adminModelConfig"
    />
  </div>
</template>

<script setup>
import UserPageSearch from '@/components/UserPageSearch/UserPageSearch.vue'
import UserPageContent from '@/components/UserPageContent/UserPageContent.vue'
import { adminFormConfig, adminTableProps, adminModelConfig } from './config/admin.config'
import { useStore } from 'vuex'
import { provide, ref, nextTick } from 'vue'
import UserFormModal from '@/components/UserFormModal'
import { usePageModal } from '@/hooks/usePageModal.js'

const store = useStore()

const userPageContentRef = ref(null)

// 搜索表单的数据
const formValue = ref({
  // 下拉框值默认为“姓名”
  label: 'name',
  value: '',
  role: adminFormConfig.userRole
})
// 分页参数
const page = ref({
  page_num: 1,
  page_size: 10
})

// 当改变了表单信息，点击查询时触发的事件
const changeFormValue = (data) => {
  formValue.value = data
  userPageContentRef.value.getPageList(formValue.value, page.value)
}

provide('formValue', formValue.value)
provide('changeFormValue', changeFormValue)

// 页面刷新就触发，当分页的信息发生变化时，触发的事件
const onPageInfoChange = (pageInfo) => {
  // 保存最新的分页参数
  page.value.page_num = pageInfo.page_num
  page.value.page_size = pageInfo.page_size
  // console.log('onPageInfoChange', pageInfo)
  const label = formValue.value.label
  if (label !== 'name') return
  nextTick(() => {
    userPageContentRef.value.getPageList(formValue.value, pageInfo)
  })
}

// 导出事件
const onHandleDownloadClick = (title) => {
  store.dispatch('userManageModule/exportToExcelAction', {role: adminFormConfig.userRole, title})
}

// 对话框的逻辑
const [formModelRef, defualtModelFormData, onHandleEditClick, onHandleNewClick] = usePageModal()
</script>

<style lang="less" scoped>
.admin {
  padding: 15px;
}
</style>
